<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="../../image/oss/iot/favicon2.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../lib/element-ui/index.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <script src="../common/util.js"></script>
    <script src="../../lib/bigscreen/js/vue.min.js"></script>
    <script src="../../lib/bigscreen/lib/jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../lib/layer/layer.js"></script>
    <script src="../../lib/element-ui/index.js"></script>
	<title>报警图片</title>
</head>
<body>
	<div id="app" v-cloak >
		<div class="search">
			<el-form :inline="true" :model="param" class="demo-form-inline">
			   <el-form-item label="起止时间">
	                <el-date-picker
		                style="width:366px"
		                v-model="param.timeDistance"
		                type="datetimerange"
		                range-separator="至"
		                value-format="yyyy/MM/dd HH:mm:ss"
		                start-placeholder="开始日期"
		                end-placeholder="结束日期">
	                </el-date-picker>
	            </el-form-item>
			  
			  <el-form-item>
			    <el-button type="primary" @click="onSubmit">查询</el-button>
			    <el-button type="info" @click="onReturn">返回</el-button>
			  </el-form-item>
			</el-form>			
		</div>
		<div style="margin:10px 0;">
			<el-table :data="videoImgData" style="width: 100%"  >
    			<el-table-column type="index" label="序号" width="100"></el-table-column>
    			<el-table-column prop="atime" label="数据时间" >
    				 <template slot-scope="scope">
				        <i class="el-icon-time"></i>
				        <span style="margin-left: 10px">{{ timeStamp2String(scope.row.atime) }}</span>
				      </template>
    			</el-table-column>
    			<el-table-column prop="url" label="报警图片" @click="download( '/res' + url )" >
    				<template slot-scope="scope">
				        <el-avatar shape="square"  :size="40"  :src=" '/res' + scope.row.url"></el-avatar>
				      </template>
    			</el-table-column>
    			<el-table-column prop="url" label="报警图片"  >
    				<template slot-scope="scope">
    					<span style="color:#3499da;cursor: pointer;" @click="download( '/res' + scope.row.url )" >下载</span>
    				</template>
    			</el-table-column>
  			</el-table>
		</div>
		<el-pagination
			  background
			  :hide-on-single-page="page_value"
			  layout="prev, pager, next"
			  :page-size="pageform.pageSize"
			  @current-change="changePage"
			  :total="pageform.totalCount">
			</el-pagination>
	</div>
	
	<script type="text/javascript">
		var app = new Vue({
			el: '#app' ,
			data: function(){
				return {
					param: {
						timeDistance: []
					} ,  	  		// 表单
					videoImgData: [] ,	  	// 摄像头信息
					page_value: true , 		// 页面隐藏
					pageform:{				//分页参数
						pageSize:10,
						totalCount:0,  
						page:1, 
					},
				}
			},
			methods: {
				initVideoImgInfo(data){
					// 查询图片
					commonAjax('POST',baseurl+"/service/page/video/file?paged="+ this.pageform.page +"&pageSize=" + this.pageform.pageSize , data ,function(res){
						if(isOk(res)){
							var dt = res.data.data ;
							app.videoImgData = dt ;
							app.pageform.totalCount = res.data.totalCount;
							if( res.data.totalCount > app.pageform.pageSize ){
								app.page_value = false ;
							}
						}else{
							app.page_value = true ;
							app.videoImgData = [] ;
						}
					});
				},
				onSubmit(){
					// 查询
					this.initVideoImgInfo({ video_id: getQueryString('videoId')  ,
						start_time: this.param.timeDistance[0] ,
						end_time: this.param.timeDistance[1]
					}) ;
				},
				changePage(page){
					this.pageform.page = page;
					this.onSubmit();
				},
				download( url ){
					window.open( url ) ;
				},
				onReturn(){
					window.location.href = baseurl + "/service/iot/video?id="+ getQueryString('videoId') +"&sid=1" ;
				}
			},
			created(){
				
			},
			mounted(){
				this.initVideoImgInfo({ video_id: getQueryString('videoId') , start_time: timeStamp2String(new Date(new Date().getTime() - 5*24*3600*1000 ) )  }) ;
			}
		});
	</script>
</body>